<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ include file="../common/include/header.jsp" %>

<%@ page import="java.util.*,util.*" %>

<div>
<table border="0" cellpadding="0" cellspacing="0" width="980px">
	<tr>
		<td style="vertical-align: top;width: 180px;background-color: #fdb73a;">
			
<!-- Left Menu Including -->
<%@ include file="../common/include/leftmenu.jsp" %>

		</td>

		<td style="text-align: center;width: 800px; vertical-align: top;">
		
<!-- 여기서부터 게시판 내용 -->
<div id="freeMain" style="text-align: center;background-color: #ffffff;">
<html:form action="freeboard.do">

<%@include file="logo.jsp" %>

<div class="boardname">	<bean:write name="freeForm" property="fbname"/></div>

<table style="width: 700px; text-align: center;" id="flist">
		
	<tr><td class="fbviewTD1" style="text-align: center;font-weight: bold;">∴<bean:write name="freeForm" property="fbtitle"/></td></tr>

	<tr><td class="fbviewTD1" style="text-align: right;"></td></tr>
		
	<tr><td style="border: 1px dotted #bbbbbb;">
	<div style="text-align: right;">
		<span style="font-size: 8pt;">[<bean:write name="freeForm" property="rownum"/>]</span>&nbsp;
		<span><a href="javascript:;" onmousedown="popmenu1('<bean:write name="freeForm" property="mid"/>')" style="color: #2F4F4F;">
		<bean:write name="freeForm" property="mcnick"/></a></span>&nbsp;
		<span style="font-size: 7pt;color: #aaaaaa;"><bean:write name="freeForm" property="fbdate"/></span>&nbsp;</div>
	<div id="contents" style="background: #ffffff;text-align: left;padding:10px;">
	</div></td></tr><html:hidden property="fbcontent"/>

<!-- 코멘트 -->	
	<tr><td><a id="toggleButton" href="javascript:toggleComment();" onfocus="blur()">▲</a>
	
	<table>
		<tr><td id="commentDIV" style="width: 660px;background: #ffffff;border: 1px dotted #bbbbbb;">
			</td></tr>
			
		<tr><td id="commentWrite" style="width: 660px;background: #ffffff;border: 1px dotted #bbbbbb;vertical-align: top;">
			<table width="660px;">
				<tr><td style="width: 80px;vertical-align: middle;text-align: center;"><%=user.getMcnick() %></td>
				<td><textarea rows="3" cols="55" style="width: 46opx;" id="commentText"></textarea>
				<input type="button" value="comment" style="background: #ffffff;border: 1px solid #bbbbbb;height: 50px;" onclick="return commentCheck(<bean:write name="freeForm" property="fbno"/>)"/></td></tr>
			</table>			

<script type="text/javascript">

</script>

			</td></tr>
	</table>
	
		</td></tr>
<%@ page import="board.FreeForm" %>
<%FreeForm ff = (FreeForm)request.getAttribute("freeForm"); %>
<logic:notEqual value="<%=ff.getFbno() %>" name="freeForm" property="fbrefno">
	
</logic:notEqual>		
<logic:equal value="<%=ff.getFbno() %>" name="freeForm" property="fbrefno">
	<logic:notEmpty name="freeForm" property="next">
		<tr><td colspan="2" style="text-align: left;padding-left: 50px;border-top: 1px dotted #dddddd;border-bottom: 1px dotted #dddddd;">
		<a href="freeboard.do?method=detailView&fbno=<bean:write name="freeForm" property="next.fbno"/>">
		[다음글]&nbsp;<bean:write name="freeForm" property="next.fbtitle"/></a></td></tr>
	</logic:notEmpty>
	<logic:notEmpty name="freeForm" property="preview">
		<tr><td colspan="2" style="text-align: left;padding-left: 50px;border-bottom: 1px dotted #dddddd;">
		<a href="freeboard.do?method=detailView&fbno=<bean:write name="freeForm" property="preview.fbno"/>">
		[이전글]&nbsp;<bean:write name="freeForm" property="preview.fbtitle"/></a></td></tr>
	</logic:notEmpty>
</logic:equal>

<!-- 이미지 버튼 -->
	<tr><td colspan="2" style="text-align: right;">

<logic:equal value="<%=ff.getFbno() %>" name="freeForm" property="fbrefno">
	<html:link href="javascript:doAction('insertform');"><img src="<%=imagePath %>icon_reply.jpg"/></html:link>	
</logic:equal>

<logic:equal value="<%=user.getMid().toLowerCase() %>" name="freeForm" property="mid">
	<html:link href="javascript:doAction('updateform')"><img src="<%=imagePath %>icon_update.jpg"/></html:link>
	<html:link href="javascript:doAction('delete');"><img src="<%=imagePath %>icon_delete.jpg"/></html:link>	
</logic:equal>

<logic:notEqual value="<%=user.getMid() %>" name="freeForm" property="mid">
<logic:greaterEqual value="7" name="user" property="userInfo.lvno" scope="session">
		<html:link href="javascript:doAction('updateform')"><img src="<%=imagePath %>icon_update.jpg"/></html:link>
		<html:link href="javascript:deleteConfirm();"><img src="<%=imagePath %>icon_delete.jpg"/></html:link>	
</logic:greaterEqual>
</logic:notEqual>


	<html:link href="javascript:doAction('getList');"><img src="<%=imagePath %>icon_list.jpg"/></html:link>

		</td></tr>

	<tr><td colspan="2">
		</td></tr>
</table>
	<input type="hidden" name="method" value=""/>
	<input type="hidden" name="fbrefno" value="<bean:write name="freeForm" property="fbno"/>"/>
	<input type="hidden" name="fbno" value="<bean:write name="freeForm" property="fbno"/>"/>
	<input type="hidden" name="fbname" value="<bean:write name="freeForm" property="fbname"/>"/>
	<input type="hidden" name="cono" value="<bean:write name="freeForm" property="cono"/>"/>
	<input type="hidden" name="fbtitle" value="<bean:write name="freeForm" property="fbtitle"/>"/>
	<input type="hidden" name="fbdate" value="<bean:write name="freeForm" property="fbdate"/>"/>
	<input type="hidden" name="fbsdate" value="<bean:write name="freeForm" property="fbsdate"/>"/>
	<input type="hidden" name="fbcontent" value="<bean:write name="freeForm" property="fbcontent"/>"/>
	<input type="hidden" name="currentPage" value="<bean:write name="pager" property="currentPage"/>"/>

</html:form>
</div>
<jsp:useBean id="freeForm" class="board.FreeForm" scope="request"/>
<script type="text/javascript">
	
// 여기서부터 Comment List 처리 Ajax //

	var xmlHttp;

	window.attachEvent("onload",startRequest);

	function createXMLHttpRequest() {
	    if (window.ActiveXObject) {
	        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	    } 
	    else if (window.XMLHttpRequest) {
	        xmlHttp = new XMLHttpRequest();
	    }
	}
	
	function startRequest() {
		var url = "<%=path%>/board/freecomment.do?method=getCommmentList";
		var fbno = "fbno=<%=freeForm.getFbno() %>";
		var cono = "&cono=<%=freeForm.getCono() %>";
		createXMLHttpRequest();
	    xmlHttp.open("POST", url, true);
	    xmlHttp.onreadystatechange = handleStateChange;
		xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	    xmlHttp.send(fbno+cono);
	}
	
	function handleStateChange() {
	    if(xmlHttp.readyState == 4) {
	    	if(xmlHttp.status == 200){
	    		parseResponse();	       
			}	           
	    }
	}
	
	function parseResponse(){

		var xmlDoc = xmlHttp.responseXML;

		var comment = xmlDoc.getElementsByTagName('comment');
		
		for(var i=0;i<comment.length;i++){
			
			var fcno = comment[i].getElementsByTagName('fcno')[0].firstChild.nodeValue;
			var fbno = comment[i].getElementsByTagName('fbno')[0].firstChild.nodeValue;
			var mid = comment[i].getElementsByTagName('mid')[0].firstChild.nodeValue;
			var mcnick = comment[i].getElementsByTagName('mcnick')[0].firstChild.nodeValue;
			var fccomment = comment[i].getElementsByTagName('fccomment')[0].firstChild.nodeValue;
			var fcdate = comment[i].getElementsByTagName('fcdate')[0].firstChild.nodeValue;
			var iconno = comment[i].getElementsByTagName('iconno')[0].firstChild.nodeValue;
			
			var newShell = createCommentDiv(fcno,fbno,mid,mcnick,fccomment,fcdate,iconno);			

			commentDIV.appendChild(newShell);
			
		}
	
		xmlHttp = null;
	}
	
//코멘트 div 생성
	function createCommentDiv(fcno,fbno,mid,mcnick,fccomment,fcdate,iconno){
	
		var shell = document.createElement('div');
		shell.style.textAlign = "left";
		shell.style.width = "660";

		var _table = document.createElement('table');
		var _tbody = document.createElement('tbody');
		var _tr = document.createElement('tr');
		
		var _mid = document.createElement('td');
		_mid.innerHTML = '<a href="javascript:;" onmousedown="popmenu1(\''+mid+'\')">'+mcnick+'</a>';
//		_mcnick.appendChild(document.createTextNode(mcnick));
//		_mcnick.onmousedown = popmenu1;
//		_mcnick.onmouseover = _mcnick.style.cursor = "hand";
//		_mid.appendChild(_mcnick);
		_mid.style.width = "120";
		_mid.className = 'commentStyle';
		_mid.style.textAlign = 'center';
		_mid.name = mid;
		
		var _fccomment = document.createElement('td');
		_fccomment.appendChild(document.createTextNode(fccomment));		
		_fccomment.style.width = "520";
		_fccomment.className = 'commentStyle';
		
		var _fcdate = document.createElement('span');
		_fcdate.appendChild(document.createTextNode('  ['+fcdate+']'));
		_fcdate.style.fontSize = '7pt';
		_fcdate.style.color = '#999999';
		
		var _deleteButton = document.createElement('td');
		if(mid=="<%=user.getMid()%>"||<%=user.getUserInfo().getLvno() %>>7){
			var buttonBox = document.createElement('a');
			buttonBox.appendChild(document.createTextNode("x"));
			buttonBox.style.width = "10";
			buttonBox.style.height = "10";
			buttonBox.style.color = "red";
			buttonBox.href="javascript:deleteComment("+fcno+");";
			
			_deleteButton.appendChild(buttonBox);
		}
		
		_tr.appendChild(_mid);
		_tr.appendChild(_fccomment);
		_fccomment.appendChild(_fcdate);
		_tr.appendChild(_deleteButton);
		
		_tbody.appendChild(_tr);
		_table.appendChild(_tbody);
		
		shell.appendChild(_table);
		
		shell.name = fcno;
		
		
		return shell;
	}
	
	var removingTarget;
	
	function deleteComment(fcno){
		var cmts = commentDIV.getElementsByTagName('div');
		
		for(var i=0;i<cmts.length;i++){
			if(cmts[i].name==fcno) {
				if(cmts[i].childNodes[0].getElementsByTagName('td')[0].name=="<%=user.getMid() %>"||<%=user.getUserInfo().getLvno() %>>7){
					var sure = confirm("코멘트를 삭제하시겠습니까?");
					if(sure==true) {
						procedeRemove(fcno);
						removingTarget = cmts[i];
					}
				} else { 
					alert("본인의 게시물이 아닙니다!!");
					return;
				}
			}
		}		
	}
	
	function procedeRemove(fcno){
		var url = "<%=path%>/board/freecomment.do?method=remove";
		var _fcno = "fcno="+fcno;		
		
		createXMLHttpRequest();
	    xmlHttp.open("POST", url, true);
	    xmlHttp.onreadystatechange = removeComment;
		xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	    xmlHttp.send(_fcno);	
	}
	
	function removeComment(){
	    if(xmlHttp.readyState == 4) {
	    	if(xmlHttp.status == 200){
	    		if(xmlHttp.responseText=="removed"){
					var _parent = removingTarget.parentNode;
					_parent.removeChild(removingTarget);
				} else {
					alert("실패")
				}
			}	           
	    }
	}
	
	
//코멘트 추가부분

	function commentCheck(fbno){
		var comment = document.getElementById('commentText').value.replace(/\/s/g,"");;
		if(comment.length>5) commentSubmit(fbno);
		else {
			alert("코멘트는 최소 5자 이상 입력하셔야 합니다.");
			document.getElementById('commentText').focus();
			return false;
		}
	}

	function commentSubmit(fbno){		
		var url = "<%=path%>/board/freecomment.do?method=write";
		var _fbno = "fbno="+fbno;
		var comment = escape(encodeURIComponent(document.getElementById('commentText').value));
		var _mid = "&mid=<%=user.getMid() %>";
		var _comment = "&fccomment="+comment;
		var _cono = "&cono=<%=freeForm.getCono() %>";
		
		var data = _fbno+_mid+_comment+_cono;
		
		createXMLHttpRequest();
	    xmlHttp.open("POST", url, true);
	    xmlHttp.onreadystatechange = addComment;
		xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	    xmlHttp.send(data);
	}
	
	function addComment() {
	    if(xmlHttp.readyState == 4) {
	    	if(xmlHttp.status == 200){
	    		setCommentTable();	       
			}	           
	    }
	}
	
	function setCommentTable(){
		var xmlDoc = xmlHttp.responseXML;

		var comment = xmlDoc.getElementsByTagName('comment');
		
			var fcno = comment[0].getElementsByTagName('fcno')[0].firstChild.nodeValue;
			var fbno = comment[0].getElementsByTagName('fbno')[0].firstChild.nodeValue;
			var mid = comment[0].getElementsByTagName('mid')[0].firstChild.nodeValue;
			var mcnick = comment[0].getElementsByTagName('mcnick')[0].firstChild.nodeValue;
			var fccomment = comment[0].getElementsByTagName('fccomment')[0].firstChild.nodeValue;
			var fcdate = comment[0].getElementsByTagName('fcdate')[0].firstChild.nodeValue;
			var iconno = comment[0].getElementsByTagName('iconno')[0].firstChild.nodeValue;
			
			var newShell = createCommentDiv(fcno,fbno,mid,mcnick,fccomment,fcdate,iconno);			

		commentDIV.appendChild(newShell);
		document.getElementById('commentText').value = "";
		xmlHttp = null;
	}
	

</script>
<script type="text/javascript">
	function deleteConfirm(){
		var sure = window.confirm('삭제하겠습니까?');
		if(sure==true) doAction('delete');
	}

	function doAction(m){	
		var method = document.getElementById('method');
		method.value = m;
		freeForm.submit();
	}

	function toggleComment(){
		if(commentDIV.style.display==""){
			commentDIV.style.display = "none";
			toggleButton.innerText = "▼"
		}else {			
			commentDIV.style.display = "";
			toggleButton.innerText = "▲"
		}		
	}

// 게시물 내용 태그 처리부분
	window.attachEvent("onload",convert);
	
	function convert(){
		var content = document.getElementById('fbcontent').value;
		
		content = content.replace(/&lt;/g,"<");
		content = content.replace(/&gt;/g,">");
		content = content.replace(/&amp;/g,"&");
		content = content.replace(/&nbsp;/g," ");
		content = content.replace(/&quot;/g,"\"");
		
		document.getElementById('contents').innerHTML = content;
	}

</script>

		</td>		
	</tr>
</table>
</div>

<%@ include file="../common/include/footer.jsp" %>